<script setup lang="ts">
import { ArrowLeftBold, ArrowRight, Search } from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { useSearchStore } from '@/stores/search'
import { storeToRefs } from 'pinia'
const { show } = storeToRefs(useSearchStore())
let action = useSearchStore();
const router = useRouter();
let active = ref(0)
//完成付款
let payment = (value:string)=>{
    action.changestate(value)
}
let confirm = (value:string)=>{
    action.changeflag(value)
}
let Refund = (value:string)=>{
    action.changerefund(value)
    router.push('/refund')
}
</script>
<template>
    <div id="Shop">
        <div class="top">
            <el-icon @click="router.back()">
                <ArrowLeftBold />
            </el-icon>
            <h3 style="margin: 0 auto">订单中心</h3>
        </div>
        <div class="nav">
            <div class="left">
                <button :class="active === 0 ? 'active' : 'none'" @click="active = 0">全部</button>
                <button :class="active === 1 ? 'active' : 'none'" @click="active = 1">待付款</button>
                <button :class="active === 2 ? 'active' : 'none'" @click="active = 2">待发货</button>
                <button :class="active === 3 ? 'active' : 'none'" @click="active = 3">待收货</button>
                <button :class="active === 4 ? 'active' : 'none'" @click="active = 4">退款</button>
            </div>
            <div class="right" @click="router.push('/search')">
                <el-icon>
                    <Search />
                </el-icon>
            </div>
        </div>
        <main>
            <div v-if="active === 0">
                <div v-for="item in show" :key="item._id" class="aaa">
                    <div class="top">
                        <p>订单号：{{ item.order }}</p>
                        <p style="color: red;" v-if="item.refund === false">{{ item.flag && item.shpr ? '待收货' : '待付款' }}
                        </p>
                        <p v-if=" item.refund && item.shpr === true" style="color: red;">交易成功</p>
                    </div>
                    <div class="bbb">
                        <div class="left">
                            <img :src="item.img" alt="" style="width: 100%;height: 170px;">
                        </div>
                        <div class="right">
                            <p>{{ item.name }}</p>
                            <p style="font-size: 14px;"><span>{{ item.desc }}</span><span>{{ item.num }}</span></p>
                            <p style="text-align: right;margin-top: 20px;">实付款￥{{ item.price }}</p>
                            <p v-if="item.refund && item.shpr === true && item.flag === false"
                                style="color: red;text-align: right;">退款成功</p>
                            <div>
                                <button v-if="item.refund && item.shpr === true && item.flag === true" @click="Refund(item._id)"
                                    style="width: 80px;height: 30px;border: 1px solid #000; border-radius: 20px;margin-left: 10px;background-color: #fff;">确认退款</button>
                                <button
                                    style="width: 80px;height: 30px;border: 1px solid #000; border-radius: 20px;margin-left: 10px;background-color: #fff;">查看物流</button>
                                <button v-if="item.flag && item.shpr && !item.refund"
                                    style="width: 80px;height: 30px;border: 1px solid #000; border-radius: 20px;margin-left: 10px;background-color: red;color: #fff;" @click="confirm(item._id)">确认收货</button>
                                <button v-if="!item.flag && !item.refund"
                                    style="width: 80px;height: 30px;border: 1px solid #000; border-radius: 20px;margin-left: 10px;background-color: red;color: #fff;" @click="payment(item._id)">确认付款</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div v-else-if="active === 1">
                <div v-for="item in show.filter(item => !item.flag && !item.refund)" :key="item._id" class="aaa">
                    <div class="top">
                        <p>订单号：{{ item.order }}</p>
                        <p style="color: red;">待付款</p>
                    </div>
                    <div class="bbb">
                        <div class="left">
                            <img :src="item.img" alt="" style="width: 100%;height: 170px;">
                        </div>
                        <div class="right">
                            <p>{{ item.name }}</p>
                            <p style="font-size: 14px;"><span>{{ item.desc }}</span><span>{{ item.num }}</span></p>
                            <p style="text-align: right;margin-top: 20px;">实付款￥{{ item.price }}</p>
                            <div>
                                <button
                                    style="width: 80px;height: 30px;border: 1px solid #000; border-radius: 20px;margin-left: 10px;background-color: red;color: #fff;" @click="payment(item._id)">付款</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div v-else-if="active === 2">
                <div v-for="item in show.filter(item => item.flag && !item.shpr)" :key="item._id" class="aaa">
                    <div class="top">
                        <p>订单号：{{ item.order }}</p>
                        <p style="color: red;">待发货</p>
                    </div>
                    <div class="bbb">
                        <div class="left">
                            <img :src="item.img" alt="" style="width: 100%;height: 170px;">
                        </div>
                        <div class="right">
                            <p>{{ item.name }}</p>
                            <p style="font-size: 14px;"><span>{{ item.desc }}</span><span>{{ item.num }}</span></p>
                            <p style="text-align: right;margin-top: 20px;">实付款￥{{ item.price }}</p>
                        </div>
                    </div>
                </div>
            </div>
            <div v-else-if="active === 3">
                <div v-for="item in show.filter(item => item.flag && item.shpr && !item.refund)" :key="item._id"
                    class="aaa">
                    <div class="top">
                        <p>订单号：{{ item.order }}</p>
                        <p style="color: red;">待收货</p>
                    </div>
                    <div class="bbb">
                        <div class="left">
                            <img :src="item.img" alt="" style="width: 100%;height: 170px;">
                        </div>
                        <div class="right">
                            <p>{{ item.name }}</p>
                            <p style="font-size: 14px;"><span>{{ item.desc }}</span><span>{{ item.num }}</span></p>
                            <p style="text-align: right;margin-top: 20px;">实付款￥{{ item.price }}</p>
                            <div>
                                <button
                                    style="width: 80px;height: 30px;border: 1px solid #000; border-radius: 20px;margin-left: 10px;background-color: #fff;">查看物流</button>
                                <button
                                    style="width: 80px;height: 30px;border: 1px solid #000; border-radius: 20px;margin-left: 10px;background-color: red;color: #fff;" @click="confirm(item._id)">确认收货</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div v-else-if="active === 4">
                <div v-for="item in show.filter(item => item.refund)" :key="item._id" class="aaa">
                    <div class="top">
                        <p>订单号：{{ item.order }}</p>
                        <p style="color: red;">退款成功</p>
                    </div>
                    <div class="bbb">
                        <div class="left">
                            <img :src="item.img" alt="" style="width: 100%;height: 170px;">
                        </div>
                        <div class="right">
                            <p>{{ item.name }}</p>
                            <p style="font-size: 14px;"><span>{{ item.desc }}</span><span>{{ item.num }}</span></p>
                            <p style="text-align: right;margin-top: 20px;">实付款￥{{ item.price }}</p>
                        </div>
                    </div>
                </div>
            </div>

        </main>
    </div>
</template>



<style scoped lang="scss">
#Shop {
    width: 100%;
    height: 100%;

    .top {
        width: 100%;
        height: 30px;
        background-color: #fff;
        display: flex;
        align-items: center;
    }

    .nav {
        width: 100%;
        height: 50px;
        display: flex;

        .left {
            width: 90%;
            height: 50px;

            .none {
                width: 20%;
                height: 50px;
                border: none;
                line-height: 50px;
                background-color: #fff;
            }

            .active {
                width: 20%;
                height: 50px;
                border: none;
                border-bottom: 2px solid #00BE8C;
                line-height: 50px;
                background-color: #fff;
            }
        }

        .right {
            width: 10%;
            height: 50px;
            line-height: 50px;
            background-color: #fff;
            text-align: center;
        }
    }

    main {
        width: 100%;
        height: calc(100% - 80px);
        background-color: #F5F5F5;

        .aaa {
            width: 100%;
            height: 200px;
            background-color: #fff;

            .top {
                width: 100%;
                height: 30px;
                display: flex;
                justify-content: space-between;
            }

            .bbb {
                width: 100%;
                height: 170px;
                display: flex;

                .left {
                    width: 150px;
                    height: 170px;
                }
            }

        }
    }
}
</style>